<template>
    <div>
        <el-dialog title="添加收货地址" :visible.sync="dialogVisible" width="30%">
            <el-form :model="form" status-icon ref="myForm" :rules="rules" @submit.prevent="handleSubmit">
                <el-form-item prop="addressInfo" label="地址信息：" :label-width="formLabelWidth">
                    <el-input v-model="form.addressInfo" autocomplete="off" size="small"
                        placeholder="请输入省/市/区/街道"></el-input>
                </el-form-item>
                <el-form-item prop="addressDetail" label="详细地址：" :label-width="formLabelWidth">
                    <el-input v-model="form.addressDetail" autocomplete="off" size="small"
                        placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"></el-input>
                </el-form-item>
                <el-form-item prop="username" label="收货人姓名：" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off" size="small" placeholder="长度不超过25个字符"></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="手机号码：" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off" size="small" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth">
                    <el-checkbox v-model="checked">设置为默认收货地址</el-checkbox>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="submit" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'AddAddress',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        const validatorPhone = (rule, value, callback) => {
            // 匹配以1开头，第二位是3、4、5、6、7、8或9中的任意一个，后面跟着9个数字的字符串，或者匹配任意3位数的字符串（这可能不是有效的手机号码，但作为示例包括在内）。
            // let reg = /^1(?:\d{9}|[0-9]{3})$/
            // 匹配以130到132、155到159、170到178、185到189开头的号码：
            let reg = /^1(?:[3-9]\d|5[0-9]|7[0-8]|8[0-9])\d{8}$/
            if (!value) {
                callback(new Error('请输入手机号码'));
            } else if (!reg.test(value)) {
                callback(new Error('手机号码格式错误，请重新输入！'));
            } else if (reg.test(value)) {
                callback();
            }
        };
        const validatorName = (rule, value, callback) => {
            let reg = /^[\\u4E00-\\u9FA5]{1-,25}(·[\\u4E00-\\u9FA5]{1,25})?$/
            if (value === '') {
                callback(new Error('请输入收货人姓名'));
            } else if (reg.test(value)) {
                callback(new Error('收货人姓名长度需要在1-25个汉字或字符之间, 不能包含特殊字符'));
            } else if (!reg.test(value)) {
                callback();
            }
        };
        const validatorAddress = (rule, value, callback) => {
            // let reg = /^[0-9a-zA-Z\s,-]+$/
            let reg = /^[\u4e00-\u9fa5a-zA-Z0-9]{2,120}$/
            if (value === '') {
                callback(new Error('请输入详细地址'));
            } else if (!reg.test(value)) {
                callback(new Error('详细地址长度需要在2-120个汉字或字符, 不能包含表情符号'));
            } else if (reg.test(value)) {
                callback();
            }
        };
        const validatorProvince = (rule, value, callback) => {
            let reg = /^[0-9a-zA-Z\s,-]+$/
            // let reg = /^[\u4e00-\u9fa5a-zA-Z0-9]{2,120}$/
            if (value === '') {
                callback(new Error('请输入收货地址信息，包括省/市/区/街道'));
            } else if (!reg.test(value)) {
                callback(new Error('请输入正确的收货地址信息，包括省/市/区/街道'));
            } else if (reg.test(value)) {
                callback();
            }
        };
        return {
            dialogVisible: false,
            dialogFormVisible: false,
            form: {
                addressInfo: '',
                addressDetail: '',
                username: '',
                phone: ''
            },
            formLabelWidth: '110px',
            checked: false,
            rules: {
                addressInfo: [
                    { validator: validatorProvince, required: true, trigger: 'change' },
                ],
                addressDetail: [
                    { validator: validatorAddress, required: true, trigger: 'change' }
                ],
                username: [
                    { validator: validatorName, required: true, trigger: 'change' }
                ],
                phone: [
                    { validator: validatorPhone, required: true, trigger: 'change' }
                ]
            }
        }
    },
    computed: {
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('add', this.show)
    },
    methods: {
        submit() {
            dialogVisible = false
        },
        show(val) {
            this.dialogVisible = val
        }
    }
};
</script>
<style lang='less' scoped>
.el-form {
    margin-top: 20px;



}

.dialog-footer {
    .el-button--default:hover {
        color: #11A983;
        border-color: #11A983;
    }

    .el-button--submit {
        background-color: #11A983;
        color: white;
    }
}
</style>